// 1. React核心库
import React from 'react';

// 2. UI组件库 - 按字母顺序
import { Button, Form, Input, Select, Switch, Space } from 'antd';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { MessageTemplateRequest } from '@/services/generated';

const { TextArea } = Input;

interface TemplateFormProps {
  initialValues?: Partial<MessageTemplateRequest>;
  onSubmit: (values: MessageTemplateRequest) => Promise<void>;
  onCancel: () => void;
  loading?: boolean;
}

const TemplateForm: React.FC<TemplateFormProps> = ({
  initialValues,
  onSubmit,
  onCancel,
  loading = false,
}) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      await onSubmit(values);
    } catch (error) {
      // 表单验证失败
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={initialValues}
    >
      <Form.Item
        label="模板名称"
        name="name"
        rules={[
          { required: true, message: '请输入模板名称' },
          { max: 100, message: '名称长度不能超过100个字符' },
        ]}
      >
        <Input placeholder="请输入模板名称" />
      </Form.Item>

      <Form.Item
        label="分类"
        name="category"
        rules={[{ required: true, message: '请选择模板分类' }]}
      >
        <Select placeholder="请选择模板分类">
          <Select.Option value="prompt">提示词</Select.Option>
          <Select.Option value="question">问题</Select.Option>
          <Select.Option value="instruction">指令</Select.Option>
          <Select.Option value="creative">创意</Select.Option>
          <Select.Option value="technical">技术</Select.Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="模板内容"
        name="content"
        rules={[
          { required: true, message: '请输入模板内容' },
          { max: 2000, message: '内容长度不能超过2000个字符' },
        ]}
      >
        <TextArea
          rows={8}
          placeholder="请输入模板内容，可以使用变量占位符，如：{name}、{topic}等"
        />
      </Form.Item>

      <Form.Item
        label="描述"
        name="description"
        rules={[{ max: 500, message: '描述长度不能超过500个字符' }]}
      >
        <TextArea
          rows={3}
          placeholder="请输入模板描述（可选）"
        />
      </Form.Item>

      <Form.Item
        label="标签"
        name="tags"
        tooltip="多个标签用逗号分隔"
      >
        <Input placeholder="请输入标签，多个标签用逗号分隔" />
      </Form.Item>

      <Form.Item
        label="公开模板"
        name="is_public"
        valuePropName="checked"
        tooltip="公开的模板可以被其他用户查看和使用"
      >
        <Switch />
      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
          <Button onClick={onCancel}>
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default TemplateForm;